<template>
	<el-menu default-active="/manage/nationFile" class="el-menu-vertical-demo"
		style="min-height: 100vh; overflow-x: hidden" @open="handleOpen" @close="handleClose" background-color="#545c64"
		text-color="#fff" active-text-color="#ffd04b" router=true>
		<div class="title-box">
			<img class="title-logo" src="@/assets/logo.png" style="width: 40px; margin-right: 5px">
			<b class="title-text" style="color: white;font-size: 15px;margin-right: 7px;">黔行通后台管理系统</b>
		</div>
		<el-menu-item index="/manage/nationFile">
			<i class="el-icon-menu"></i>
			<span slot="title">民族方言管理</span>
		</el-menu-item>
		<el-menu-item index="/manage/regionFile">
			<i class="el-icon-files" />
			<span>地区方言管理</span>
		</el-menu-item>
		<el-menu-item index="/manage/festival">
			<i class="el-icon-files" />
			<span>精彩节庆管理</span>
		</el-menu-item>
		<el-menu-item index="/manage/crousel">
			<i class="el-icon-files" />
			<span>轮播图管理</span>
		</el-menu-item>
		<el-menu-item index="">
			<i class="el-icon-files" />
			<span>游记管理</span>
		</el-menu-item>
		<el-menu-item index="">
			<i class="el-icon-files" />
			<span>文创产品管理</span>
		</el-menu-item>
		<el-menu-item index="">
			<i class="el-icon-files" />
			<span>用户管理</span>
		</el-menu-item>
	</el-menu>
</template>

<script>
	export default {
		name: "Aside",
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			}
		}
	}
</script>

<style scoped>
	.title-box {
		/* border: 1px solid deeppink; */
		display: flex;
		align-items: center;
		line-height: 55px;
		justify-content: center;
	}

	.title-logo {
		/* border: 1px solid blue; */
		border-radius: 50%;
	}

	.title-text {
		/* border: 1px solid red; */
	}
</style>